<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>PNotify Styling Demos</title>
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      type="text/javascript"
      src="../packages/core/dist/PNotify.js"
    ></script>
    <script
      type="text/javascript"
      src="../packages/bootstrap3/dist/PNotifyBootstrap3.js"
    ></script>
    <script
      type="text/javascript"
      src="../packages/bootstrap4/dist/PNotifyBootstrap4.js"
    ></script>
    <script
      type="text/javascript"
      src="../packages/font-awesome4/dist/PNotifyFontAwesome4.js"
    ></script>
    <script
      type="text/javascript"
      src="../packages/font-awesome5/dist/PNotifyFontAwesome5.js"
    ></script>
    <script
      type="text/javascript"
      src="../packages/glyphicon/dist/PNotifyGlyphicon.js"
    ></script>
    <script
      type="text/javascript"
      src="../packages/confirm/dist/PNotifyConfirm.js"
    ></script>
    <script
      type="text/javascript"
      src="../packages/mobile/dist/PNotifyMobile.js"
    ></script>
    <link
      href="../packages/core/dist/PNotify.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../packages/bootstrap3/dist/PNotifyBootstrap3.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../packages/bootstrap4/dist/PNotifyBootstrap4.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../packages/core/dist/BrightTheme.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../packages/core/dist/Material.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../packages/core/dist/Angeler.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../packages/confirm/dist/PNotifyConfirm.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../packages/mobile/dist/PNotifyMobile.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link href="" id="bootstrap-css" rel="stylesheet" type="text/css" />
    <link href="" id="fontawesome-css" rel="stylesheet" type="text/css" />

    <style type="text/css">
      body,
      body.light,
      button,
      body.light button,
      select,
      body.light select {
        background-color: white;
        color: black;
      }

      body.dark,
      body.dark button,
      body.dark select {
        background-color: black;
        color: white;
      }

      @media (prefers-color-scheme: dark) {
        body,
        button,
        select {
          background-color: black;
          color: white;
        }
      }
    </style>

    <script type="text/javascript">
      /* globals PNotify */
      window.addEventListener('DOMContentLoaded', () => {
        // ---
        // Set defaults.
        // ---
        PNotify.defaultModules.set(PNotifyMobile, {});
      });

      window.setStyling = function () {
        var styling = document.getElementById('styling').value;

        switch (styling) {
          case 'bootstrap3':
            document.forms.libraries.elements.libraryBootstrap.value = '3';
            loadLibraries();
            PNotify.defaultModules.set(PNotifyBootstrap3, {});
            PNotify.defaultModules.delete(PNotifyBootstrap4);
            break;
          case 'bootstrap4':
            document.forms.libraries.elements.libraryBootstrap.value = '4';
            loadLibraries();
            PNotify.defaultModules.set(PNotifyBootstrap4, {});
            PNotify.defaultModules.delete(PNotifyBootstrap3);
            break;
          default:
            PNotify.defaultModules.delete(PNotifyBootstrap3);
            PNotify.defaultModules.delete(PNotifyBootstrap4);
            PNotify.defaults.styling = styling;
            break;
        }

        PNotify.defaultStack.close();
      };

      window.setIcons = function () {
        var icons = document.getElementById('icons').value;

        switch (icons) {
          case 'bootstrap3':
            document.forms.libraries.elements.libraryBootstrap.value = '3';
            loadLibraries();
            PNotify.defaultModules.set(PNotifyGlyphicon, {});
            PNotify.defaultModules.delete(PNotifyFontAwesome4);
            PNotify.defaultModules.delete(PNotifyFontAwesome5);
            break;
          case 'fontawesome4':
            document.forms.libraries.elements.libraryFontAwesome.value = '4';
            loadLibraries();
            PNotify.defaultModules.set(PNotifyFontAwesome4, {});
            PNotify.defaultModules.delete(PNotifyGlyphicon);
            PNotify.defaultModules.delete(PNotifyFontAwesome5);
            break;
          case 'fontawesome5':
            document.forms.libraries.elements.libraryFontAwesome.value = '5';
            loadLibraries();
            PNotify.defaultModules.set(PNotifyFontAwesome5, {});
            PNotify.defaultModules.delete(PNotifyFontAwesome4);
            PNotify.defaultModules.delete(PNotifyGlyphicon);
            break;
          default:
            PNotify.defaultModules.delete(PNotifyGlyphicon);
            PNotify.defaultModules.delete(PNotifyFontAwesome4);
            PNotify.defaultModules.delete(PNotifyFontAwesome5);
            PNotify.defaults.icons = icons;
            break;
        }

        PNotify.defaultStack.close();
      };

      window.setMode = function () {
        var mode = document.getElementById('mode').value;

        PNotify.defaults.mode = mode;

        document.body.classList.remove('light', 'dark');
        if (['light', 'dark'].indexOf(mode) !== -1) {
          document.body.classList.add(mode);
        }

        PNotify.defaultStack.close();
      };

      window.setRtl = function () {
        var rtl = document.getElementById('rtl').checked;

        if (rtl) {
          document.body.dir = 'rtl';
        } else {
          document.body.dir = '';
        }
      };

      function loadLibraries() {
        var bootstrap =
          document.forms.libraries.elements.libraryBootstrap.value;
        var bootstrapCss = document.getElementById('bootstrap-css');
        var fontAwesome =
          document.forms.libraries.elements.libraryFontAwesome.value;
        var fontAwesomeCss = document.getElementById('fontawesome-css');
        var output = document.getElementById('output');
        output.innerText = '';

        if (bootstrap === '3') {
          bootstrapCss.href =
            'https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css';
          output.innerText += ' Loaded Bootstrap 3.';
        } else if (bootstrap === '4') {
          bootstrapCss.href =
            'https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css';
          output.innerText += ' Loaded Bootstrap 4.';
        } else {
          bootstrapCss.href = '';
        }

        if (fontAwesome === '4') {
          fontAwesomeCss.href =
            'https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css';
          output.innerText += ' Loaded Font Awesome 4.';
        } else if (fontAwesome === '5') {
          fontAwesomeCss.href =
            'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css';
          output.innerText += ' Loaded Font Awesome 5.';
        } else {
          fontAwesomeCss.href = '';
        }
      }
    </script>
  </head>

  <body>
    <div style="padding: 0 30px; margin: 20px 0">
      <h1>Styling Demo</h1>
      <p>
        Use this page to check out various PNotify styling options. The Buttons,
        Confirm, and Mobile modules have been loaded.
      </p>

      <section>
        <h2>Choose PNotify's Styling Options</h2>
        <p>
          Styling:
          <select id="styling" onchange="setStyling()">
            <option value="brighttheme">Bright Theme</option>
            <option value="material">Material</option>
            <option value="angeler">Angeler</option>
            <option value="bootstrap3">Bootstrap 3</option>
            <option value="bootstrap4">Bootstrap 4</option>
          </select>
          Icons:
          <select id="icons" onchange="setIcons()">
            <option value="brighttheme">Bright Theme</option>
            <option value="material">Material</option>
            <option value="angeler">Angeler</option>
            <option value="bootstrap3">Bootstrap 3 (Glyphicon)</option>
            <option value="fontawesome4">Font Awesome 4</option>
            <option value="fontawesome5">Font Awesome 5</option>
          </select>
          Mode:
          <select id="mode" onchange="setMode()">
            <option value="no-preference">System Default</option>
            <option value="light">Light</option>
            <option value="dark">Dark</option>
          </select>
        </p>
        <p>
          <label
            ><input type="checkbox" id="rtl" onchange="setRtl()" /> Make page
            RTL (set dir="rtl" on &lt;body&gt;)</label
          >
        </p>
        <h2>Load CSS Libraries</h2>
        <form name="libraries">
          <label
            ><input
              type="radio"
              name="libraryBootstrap"
              value=""
              onchange="loadLibraries()"
              checked
            />
            No Bootstrap</label
          >
          <label
            ><input
              type="radio"
              name="libraryBootstrap"
              value="3"
              onchange="loadLibraries()"
            />
            Bootstrap 3</label
          >
          <label
            ><input
              type="radio"
              name="libraryBootstrap"
              value="4"
              onchange="loadLibraries()"
            />
            Bootstrap 4</label
          >
          <br />
          <label
            ><input
              type="radio"
              name="libraryFontAwesome"
              value=""
              onchange="loadLibraries()"
              checked
            />
            No Font Awesome</label
          >
          <label
            ><input
              type="radio"
              name="libraryFontAwesome"
              value="4"
              onchange="loadLibraries()"
            />
            Font Awesome 4</label
          >
          <label
            ><input
              type="radio"
              name="libraryFontAwesome"
              value="5"
              onchange="loadLibraries()"
            />
            Font Awesome 5</label
          >
        </form>
        <span id="output"></span>
      </section>
      <hr />
      <h2>Test Notices</h2>
      <button
        onclick="PNotify.notice({
          title: 'Test Notice',
          text: 'This is a test notice alert.'
        })"
      >
        Test Notice
      </button>
      <button
        onclick="PNotify.info({
          title: 'Test Info',
          text: 'This is a test info alert.'
        })"
      >
        Test Info
      </button>
      <button
        onclick="PNotify.success({
          title: 'Test Success',
          text: 'This is a test success alert.'
        })"
      >
        Test Success
      </button>
      <button
        onclick="PNotify.error({
          title: 'Test Error',
          text: 'This is a test error alert.'
        })"
      >
        Test Error
      </button>
      <button
        onclick="PNotify.info({
          title: 'This is a test notice with title.'
        })"
      >
        Just Title
      </button>
      <button
        onclick="PNotify.info({
          text: 'This is a test notice with text.'
        })"
      >
        Just Text
      </button>
      <h3>Confirm Module</h3>
      <button
        onclick="PNotify.notice({
          title: 'Confirmation Needed',
          text: 'Are you sure?',
          hide: false,
          closer: false,
          sticker: false,
          modules: new Map([
            ...PNotify.defaultModules,
            [PNotifyConfirm, {confirm: true}]
          ])
        });"
      >
        Confirm Notice
      </button>
      <button
        onclick="PNotify.info({
          title: 'Confirmation Needed',
          text: 'Are you sure?',
          hide: false,
          closer: false,
          sticker: false,
          modules: new Map([
            ...PNotify.defaultModules,
            [PNotifyConfirm, {confirm: true}]
          ])
        });"
      >
        Confirm Info
      </button>
      <button
        onclick="PNotify.success({
          title: 'Confirmation Needed',
          text: 'Are you sure?',
          hide: false,
          closer: false,
          sticker: false,
          modules: new Map([
            ...PNotify.defaultModules,
            [PNotifyConfirm, {confirm: true}]
          ])
        });"
      >
        Confirm Success
      </button>
      <button
        onclick="PNotify.error({
          title: 'Confirmation Needed',
          text: 'Are you sure?',
          hide: false,
          closer: false,
          sticker: false,
          modules: new Map([
            ...PNotify.defaultModules,
            [PNotifyConfirm, {confirm: true}]
          ])
        });"
      >
        Confirm Error
      </button>
      <br />
      <button
        onclick="PNotify.notice({
          title: 'Input Needed',
          text: 'What side would you like?',
          hide: false,
          closer: false,
          sticker: false,
          modules: new Map([
            ...PNotify.defaultModules,
            [PNotifyConfirm, {prompt: true}]
          ])
        });"
      >
        Prompt Notice
      </button>
      <button
        onclick="PNotify.info({
          title: 'Input Needed',
          text: 'What side would you like?',
          hide: false,
          closer: false,
          sticker: false,
          modules: new Map([
            ...PNotify.defaultModules,
            [PNotifyConfirm, {prompt: true}]
          ])
        });"
      >
        Prompt Info
      </button>
      <button
        onclick="PNotify.success({
          title: 'Input Needed',
          text: 'What side would you like?',
          hide: false,
          closer: false,
          sticker: false,
          modules: new Map([
            ...PNotify.defaultModules,
            [PNotifyConfirm, {prompt: true}]
          ])
        });"
      >
        Prompt Success
      </button>
      <button
        onclick="PNotify.error({
          title: 'Input Needed',
          text: 'What side would you like?',
          hide: false,
          closer: false,
          sticker: false,
          modules: new Map([
            ...PNotify.defaultModules,
            [PNotifyConfirm, {prompt: true}]
          ])
        });"
      >
        Prompt Error
      </button>
      <br />
      <button
        onclick="PNotify.notice({
          title: 'Input Needed',
          text: 'Describe the color blue.',
          hide: false,
          closer: false,
          sticker: false,
          modules: new Map([
            ...PNotify.defaultModules,
            [PNotifyConfirm, {prompt: true, promptMultiLine: true}]
          ])
        });"
      >
        Multi Line Prompt Notice
      </button>
      <button
        onclick="PNotify.info({
          title: 'Input Needed',
          text: 'Describe the color blue.',
          hide: false,
          closer: false,
          sticker: false,
          modules: new Map([
            ...PNotify.defaultModules,
            [PNotifyConfirm, {prompt: true, promptMultiLine: true}]
          ])
        });"
      >
        Multi Line Prompt Info
      </button>
      <button
        onclick="PNotify.success({
          title: 'Input Needed',
          text: 'Describe the color blue.',
          hide: false,
          closer: false,
          sticker: false,
          modules: new Map([
            ...PNotify.defaultModules,
            [PNotifyConfirm, {prompt: true, promptMultiLine: true}]
          ])
        });"
      >
        Multi Line Prompt Success
      </button>
      <button
        onclick="PNotify.error({
          title: 'Input Needed',
          text: 'Describe the color blue.',
          hide: false,
          closer: false,
          sticker: false,
          modules: new Map([
            ...PNotify.defaultModules,
            [PNotifyConfirm, {prompt: true, promptMultiLine: true}]
          ])
        });"
      >
        Multi Line Prompt Error
      </button>
    </div>
    <script type="text/javascript">
      loadLibraries();
      window.setStyling();
      window.setIcons();
      window.setMode();
    </script>
  </body>
</html>
